<!doctype html>
<%@ page language="java" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jstl/fmt" prefix="fmt"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<%@ taglib uri="http://shiro.apache.org/tags" prefix="shiro" %>
<html>
<head>
<meta charset="utf-8">
<jsp:include page="/common/commonCss.jsp" />
<jsp:include page="/common/commonJs.jsp" />
<script src="${basePath }commonJs/tags/My97DatePicker/WdatePicker.js"></script>
<script src="${basePath }resources/membership/finger.js"></script>
<script src="${basePath }resources/membership/single.js"></script>


<style>
#listBoxTop{width: 996px;}        
#containerTop{width: 1056px;}
#listBox{width: 920px;}
#container{width: 1000px;}
</style>
<script src="${basePath}commonJs/jquery.imageScroller.js"></script>
<title>访客入场</title>
<script type="text/javascript">
$(function () {
	 $("#listBoxTop").imageScroller({
        next: "btnNextTop",
        prev: "btnPrevTop",
        frame: "listTop",
        child: "li",
        auto: false
    });
   $("#listBox").imageScroller({
       next: "btnNext",
       prev: "btnPrev",
       frame: "list",
       child: "li",
       auto: false
   });
});


//选中的会员
var selMemberId = "";
var base = "${basePath}";

function setMemberCss(t,status,inTime,outTime,isBlack) {
	if(isBlack==1 || status==3 || status==4 || status==null || status==''){//红色-问题（过期/黑名单/停卡）
		if(isBlack==1){
			alertError("黑名单用户无权限操作，谢谢！");
			return;
		}
		if(status==3){
			alertError("会员过期，请续费，谢谢！");
			return;
		}
		if(status==4){
			if((inTime!=null && inTime!="") && (outTime==null || outTime=="")){//绿色-场内
				//不做操作
			}else{//灰色-场外
				alertError("会员已停卡，谢谢！");
				return;
			}
		}else{
			alertError("会员过期，请续费，谢谢！");
			return;
		}
	}

var type="${type}";//1：入场；2：出场

if(null!=type && type=="1"){
	if((inTime!=null && inTime!="") && (outTime==null || outTime=="")){//绿色-场内不能入场
		return;
	}
	
	//判断访客是否已体验
	var isIn=true;
	$.ajax({
		async : false,
		type : "post",
		url : "getVisitorIn.shtml?memberId="+t.id,
		success : function(result) {
			if (result=="1") {
				//已体验
				isIn=false;
			}
		}
	});

	if(isIn==false){
		alertError("此访客已体验，谢谢！");
		return;
	}
	
}else{
	if((inTime==null || inTime=="") || (outTime!=null && outTime!="")){//场外的
		return;
	}
}

if (t == null) return;

	if (selMemberId!="" && selMemberId.indexOf(t.id)!=-1) {
		if(selMemberId.indexOf(t.id)==0){//id在第一位时
			if(selMemberId.indexOf(",")!=-1){//有逗号时
				selMemberId=selMemberId.replace(t.id+",", "");//连逗号一起替换
			}else{
				selMemberId=selMemberId.replace(t.id, "");//替换唯一的一个
			}
		}
		
		//id在中间时
		if(selMemberId.indexOf(","+t.id)!=-1){//有逗号时
			selMemberId=selMemberId.replace(","+t.id, "");//连逗号一起替换
		}
		
		//t.style.backgroundColor = '';
		//判断小朋友头像背景色
		var bgColor="";
		if(isBlack==1 || status==3 || status==4 || status==null || status==''){//红色-问题（过期/黑名单/停卡）
			if((inTime!=null && inTime!="") && (outTime==null || outTime=="")){//绿色-场内
				bgColor="coll_img colle_img_lv";
			}else{//灰色-场外
				bgColor="coll_img colle_img_red";
			}
		}else{
			if((inTime!=null && inTime!="") && (outTime==null || outTime=="")){//绿色-场内
				bgColor="coll_img colle_img_lv";
			}else{//灰色-场外
				bgColor="coll_img colle_img_ccc";
			}
		}
		$("#"+t.id).attr("class",bgColor);
	} else {
		//t.style.backgroundColor = '#6eafdd';
		$("#"+t.id).attr("class","coll_img colle_img_blue");
		
		if(selMemberId==""){
			selMemberId += t.id;
		}else{
			selMemberId += ","+t.id;
		}
	}
	$("#inMemberIds").val(selMemberId);
}

function goIn(){
	var inMemberIds=$("#inMemberIds").val();
	
	//未选择任何客人
	if(inMemberIds=="" || inMemberIds==null){
		alertInfo("请选择进场的访客!");
		return;
	}
	
	//进场操作
	$.messager.confirm('提示','确定进场吗',function(r) {
		if (r) {
			$.ajax({
				cache : false,
				type : "post",
				url : "locPerGoIn.shtml",
				data :$("#inForm").serialize(),
				success : function(result) {
					if (result!="") {
	    				window.location.href="${basePath}management/site/locPerManager.shtml?type=1";
					}
				}
			});
		}
	});
}

function goOut(){
	var inMemberIds=$("#inMemberIds").val();
	
	//未选择任何客人
	if(inMemberIds=="" || inMemberIds==null){
		alertInfo("请选择出场的访客!");
		return;
	}
	
	//进场操作
	$.messager.confirm('提示','确定出场吗',function(r) {
		if (r) {
			$.ajax({
				cache : false,
				type : "post",
				url : "locPerGoOut.shtml",
				data :$("#inForm").serialize(),
				success : function(result) {
					if (result!="") {
	    				window.location.href="${basePath}management/site/locPerManager.shtml?type=1";
					}
				}
			});
		}
	});
}

function  collectFingerprint() {
	try {
		var data = collectFingerFeatrue();
		if (data != "") {
			queryMemberByFingerprint(data);
		}
	} catch (e) {
		return "";
	}
}


//根据会员姓名或监护人号码查询(销售)
function queryMemberAndSale(obj) {
	$("#nameOrTel").val(obj.value);
	if (obj.value == "") {
		alertError(getMessage($common_msg_empty, "查询条件"));
		return false;
	}
	$('#container').show();
	$.ajax({
		cache : false,
		type : "post",
		dataType : "json",
		url : "${basePath}management/site/querySaleDetailAndSale.shtml",
		data :$("#conditionForm").serialize(),
		success : function(data) {//data为返回的数据，在这里做数据绑定
			$("#listTop li").remove();
			if (data == null || data.length == 0) {
				alertInfo("没有匹配的记录！");
			} else {
				trimJsonArray(data);
				for (var i = 0; i < data.length; i++) {
					var member = data[i];
					//判断小朋友头像背景色
					var bgColor="coll_img colle_img_lv";
					if((member.inTime!=null && member.inTime!="") && (member.outTime==null || member.outTime=="")){//绿色-场内
						bgColor="coll_img colle_img_lv";
					}else{//灰色-场外
						bgColor="coll_img colle_img_ccc";
					}
					
					var memName=member.memName;
					if(memName.length>5){
						memName=memName.substring(0, 5)+"...";
					}
					
					var li;
					li = '<li>';
					li += '	<a href="javascript:" >';
					li += '		<p><img class="' + bgColor + '" style="width:145px;height:190px;" src="${basePath}common/showImage.shtml?imagePath=' + member.imagePath + ' "></p>';
					li += ' 		<dl class="collection_t_l_dl">';
					li += ' 		<dd>'
							+ memName + '   <span class="fr">' + member.age + '岁</span> ' 
							+ '</dd>';
					li += ' 		</dl>';
					li += '	</a>';
					li += '</li>';
					$("#listTop").append(li);
				}
			}
			return;
		}
	});
}

//根据指纹查询
function queryMemberByFingerprint(fingerprint) {
	if (fingerprint == "") {
		alertError(getMessage($common_msg_empty, "指纹采集失败，请重新录入指纹"));
		return false;
	}
	$("#fingerprint").val(fingerprint);
	$('#container').show();
	$.ajax({
		cache : false,
		type : "post",
		dataType : "json",
		url : "${basePath}management/site/queryMemberByFingerprintAndSale.shtml",
		data :$("#fpForm").serialize(),
		complete : function() {
		},
		success : function(data) {//data为返回的数据，在这里做数据绑定
			$("#listTop li").remove();
			if (data == null) {
				alertInfo("没有匹配的记录！");
			} else {
				trimJsonArray(data);
				
				//判断小朋友头像背景色
				var bgColor="coll_img colle_img_lv";
				if((data.inTime!=null && data.inTime!="") && (data.outTime==null || data.outTime=="")){//绿色-场内
					bgColor="coll_img colle_img_lv";
				}else{//灰色-场外
					bgColor="coll_img colle_img_ccc";
				}
				
				var memName=data.memName;
				if(memName.length>5){
					memName=memName.substring(0, 5)+"...";
				}
				
				var li;
				li = '<li>';
				li += '	<a href="javascript:" >';
				li += '		<p><img class="' + bgColor + '" style="width:145px;height:190px;" src="${basePath}common/showImage.shtml?imagePath=' + data.imagePath + ' "></p>';
				li += ' 		<dl class="collection_t_l_dl">';
				li += ' 		<dd>'
						+ memName + '   <span class="fr">' + data.age + '岁</span> ' 
						+ '</dd>';
				li += ' 		</dl>';
				li += '	</a>';
				li += '</li>';
				$("#listTop").append(li);
			}
			return;
		}
	});
}
</script>

</head>
<body class="bg">

<div class="content m_auto ">
	<div class="content_l mt10">
    	<ul>
        	<shiro:hasPermission name="management/site/locPerManager.shtml?type=1">
				<li <c:if test="${type==1 }">class="content_hover"</c:if>><a href="${basePath}management/site/locPerManager.shtml?type=1"><i class="nav_icon_c"></i><br>入场管理</a></li>
			</shiro:hasPermission>
        	<shiro:hasPermission name="management/site/locPerManager.shtml?type=2">
            	<li <c:if test="${type==2 }">class="content_hover"</c:if>><a href="${basePath}management/site/locPerManager.shtml?type=2"><i class="nav_icon_i"></i><br>出场管理</a></li>
            </shiro:hasPermission>
            <shiro:hasPermission name="management/site/locPerMemer.shtml">
            	<li><a href="${basePath}management/site/locPerMemer.shtml"><i class="nav_icon_j"></i><br>场内人员</a></li>
            </shiro:hasPermission>
        </ul>
    </div>
    <div class="content_r mt10">
    	<div class=" fixed">
        	<div class="collection_img m30 fl">
                <span class="collection_span">
                    <c:if test="${secUsr.imagePath!=null && secUsr.imagePath!='' }">
                   		<img src="${basePath}common/showImage.shtml?imagePath=${secUsr.imagePath}" class="colle_img" width="150px" height="180px">
                    </c:if>
                    <c:if test="${secUsr.imagePath==null || secUsr.imagePath=='' }">
                   		<img src="${basePath }commonCss/images/index_02.png" class="colle_img" width="150px" height="180px">
                    </c:if>
                    <p class="p10 fixed" title="${secUsr.usrName }">
                    <c:choose> 
						<c:when test="${fn:length(secUsr.usrName) > 5}">${fn:substring(secUsr.usrName, 0, 5)}...</c:when> 
						<c:otherwise>${secUsr.usrName}</c:otherwise>
					</c:choose>
                    <span class="fr">销售</span>
                    </p>
                </span>
            </div>
            
             <div class="payment_r mt30 fr mr100">
             <div class="ml60 payment_tab">
             	<h2 class="m10 f18">请扫描或查询儿童访客</h2>
            	<ul id="tab_a" class="f14 fixed">
                   <li onClick="javascript:$('#container').hide();">扫描指纹查询</li>
                   <li onClick="javascript:$('#container').hide();">条件查询</li>
                </ul>
                <ul id="tab_conbox_a">
                    <li class="tc p20">
                    	<form id="fpForm" method="post">
                    	<a href="#" onClick="collectFingerprint();">
                    		<img src="${basePath}commonCss/images/zhiwen.gif">
                    		<input type="hidden" name="fingerprint" id="fingerprint">
                    	</a>
                    	</form>
                    </li>
                    <li class="tc p20">
                    		姓名/电话：<input type="text" class="iput_t mt20" onkeydown="if(event.keyCode==13) {queryMemberAndSale(this);}">
                    <form id="conditionForm" method="post">
                    		<input type="hidden" name="nameOrTel" id="nameOrTel">
                    		<input type="hidden" name="userId" value="${secUsr.pkUsrId }" />
                    		<input type="hidden" name="type" value="${type }" />
                    </form>
                    </li>
                </ul>
            </div>
            </div>
        </div>
        
        <div class="payment_r mt30">
        	<div style="display:none;">
			<object classid="clsid:82C2415C-1EC7-41ED-A6F0-2BCA3B4216E2" id="finger" codebase="${basePath }plugin/Ferly727.ocx">
			  <param name="_ExtentX" value="635">
			  <param name="_ExtentY" value="582">
			  <param name="_StockProps" value="64">
			  <param name="Enabled" value="1">
			</object>
			</div>
        
        <div id="containerTop"  class="collection_t ml10 fixed">
           	<div id="btnNextTop"><a class="collection_t_l" href="javascript:void(0);"></a></div>
           	<div id="listBoxTop" >
           	<ul id="listTop" >
           		<!-- 会员信息 start -->
								<c:forEach items="${memList }" var="member" varStatus="status">
								<%-- <c:if test="${member.status!=5}"> --%>
								<c:if test="${type=='1'}">
									<li id="li_member_${member.pkMemId}">
											<a>
													<p>
														<img onclick="setMemberCss(this,'${member.status}','${member.inTime}','${member.outTime}','${member.isBlack}')" id="${member.pkMemId}" class="
														<c:if test="${member.isBlack == 0 || member.status == 3 || member.status == 4 || member.status == null || member.status == ''}">
															<c:if test="${(member.inTime != null && member.inTime != '') && (member.outTime == null || member.outTime == '')}">
																coll_img colle_img_lv
															</c:if>
															<c:if test="${(member.inTime == null || member.inTime == '') || (member.outTime != null && member.outTime != '')}">
																coll_img colle_img_red
															</c:if>
														</c:if>
														<c:if test="${member.isBlack != 0 && member.status != 3 && member.status != 4 && member.status != null && member.status != ''}">
															<c:if test="${(member.inTime != null && member.inTime != '') && (member.outTime == null || member.outTime == '')}">
																coll_img colle_img_lv
															</c:if>
															<c:if test="${(member.inTime == null || member.inTime == '') || (member.outTime != null && member.outTime != '')}">
																coll_img colle_img_ccc
															</c:if>
														</c:if>
														" style="width:145px;height:190px;" src="${basePath}common/showImage.shtml?imagePath=${member.imagePath}">
													</p>
											<dl class="collection_t_l_dl">
												<dd title="${member.memName}">
													<c:choose> 
															<c:when test="${fn:length(member.memName) > 5}">${fn:substring(member.memName, 0, 5)}...</c:when> 
															<c:otherwise>${member.memName}</c:otherwise>
														</c:choose>
														<span class="fr">${member.age}岁</span>
												</dd>
											</dl>
										</a>
									</li>
								</c:if>
								<c:if test="${type=='2'}">
								<!-- 只显示场内人员 -->
									<c:if test="${(member.inTime != null && member.inTime != '') && (member.outTime == null || member.outTime == '')}">
									<li id="li_member_${member.pkMemId}">
										<div class="collection_contet mt20" >
											<div class="collection_img fl">
												<span class="collection_span">
													<span class="ing_hover">
														<i>${member.imageTimePage}</i>
														<img onclick="setMemberCss(this,'${member.status}','${member.inTime}','${member.outTime}','${member.isBlack}')" id="${member.pkMemId}" class="
														<c:if test="${member.isBlack == 0 || member.status == 3 || member.status == 4 || member.status == null || member.status == ''}">
															<c:if test="${(member.inTime != null && member.inTime != '') && (member.outTime == null || member.outTime == '')}">
																coll_img colle_img_lv
															</c:if>
															<c:if test="${(member.inTime == null || member.inTime == '') || (member.outTime != null && member.outTime != '')}">
																coll_img colle_img_red
															</c:if>
														</c:if>
														<c:if test="${member.isBlack != 0 && member.status != 3 && member.status != 4 && member.status != null && member.status != ''}">
															<c:if test="${(member.inTime != null && member.inTime != '') && (member.outTime == null || member.outTime == '')}">
																coll_img colle_img_lv
															</c:if>
															<c:if test="${(member.inTime == null || member.inTime == '') || (member.outTime != null && member.outTime != '')}">
																coll_img colle_img_ccc
															</c:if>
														</c:if>
														" style="width:145px;height:190px;" src="${basePath}common/showImage.shtml?imagePath=${member.imagePath}">
													</span>
												</span>
												<p class="p10 fixed" title="${member.memName}">
													<c:choose> 
															<c:when test="${fn:length(member.memName) > 5}">${fn:substring(member.memName, 0, 5)}...</c:when> 
															<c:otherwise>${member.memName}</c:otherwise>
														</c:choose>
												</p>
											</div>
										</div>
									</li>
									</c:if>
								</c:if>
								<%-- </c:if> --%>
								</c:forEach>
								<!-- 会员信息 end -->
            </ul>
            
        </div><div id="btnPrevTop"> <a href="javascript:void(0);" class="collection_t_r"></a></div></div>
        <br/>
        <div class="btm_btn ">
            <dl>
                <dd><a href="${basePath}management/site/locPerManager.shtml?type=${type}"><input type="button" class="btn" value="取&nbsp;&nbsp;消"></a></dd>
                <c:if test="${type eq '1' }">
                	<dd><a href="javascript:"><input type="button" class="btn" value="进&nbsp;&nbsp;场" onclick="goIn();"></a></dd>
    			</c:if>
        		<c:if test="${type eq '2' }">
                	<dd><a href="javascript:"><input type="button" class="btn" value="出&nbsp;&nbsp;场" onclick="goOut();"></a></dd>
    			</c:if>
            </dl>
        </div>
    </div>
    
    <form id="inForm">
    	<input type="hidden" id="inMemberIds" name="inMemberIds" />
    	<input type="hidden" id="saleId" name="saleId" value="${secUsr.pkUsrId }" />
    </form>
</div>
</body>
</html>
















